<template>
    <div style="height: 100%" id="layout">
        <!--        遮罩层      -->
        <div v-if="cardShow" id="msk" style="z-index: 1003;
                    background-color: #cccccc;
                    height: 100%;
                    width: 100%;
                    position: absolute;
                    opacity: 0.5;
                    ">
        </div>
        <el-container style="height: 100%">
            <el-aside width="160px" style="background-color: rgb(70,127,152)">
                <div class="logoImg"></div>
                <el-col :span="12">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="rgb(70,127,152)"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <!--                    <el-menu-item index="0" class="el-item-left" @click="$router.push('/FamilyOrigin')">-->
                        <el-menu-item index="0" class="el-item-left" @click="wkfmk()">
                            <i class="el-icon-location"></i>
                            <span slot="title">资讯管理</span>
                        </el-menu-item>
                        <el-menu-item index="1" class="el-item-left" @click="$router.push('/LookGenealogy')">
                            <i class="el-icon-menu"></i>
                            <span slot="title">查阅族谱</span>
                        </el-menu-item>
                        <el-menu-item index="3" class="el-item-left" @click="$router.push('/ManagementGenealogy')">
                            <i class="el-icon-document"></i>
                            <span slot="title">管理族谱</span>
                        </el-menu-item>
                        <!--                    <el-menu-item index="4" class="el-item-left" @click="$router.push('/AddFamilyAccount')">-->
                        <el-menu-item index="4" class="el-item-left" @click="wkfmk()">
                            <i class="el-icon-setting"></i>
                            <span slot="title">族员管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-aside>
            <el-container>
                <el-header style="display: flex; height: 100px; padding-right: 0; background-color: rgb(70,127,152)">
                    <div style="width: 100%; height: 100%; flex: 70%; margin-top: 15px">
                        <!--                        用户名：{{ userInfo.name }} &#45;&#45;&#45;&#45;-->
                        <!--                        id：{{userInfo.id}} -&#45;&#45;&#45;&#45;-->
                        <!--                        用户类型：{{userInfo.userType}}-&#45;&#45;&#45;&#45;-->
                        <!--                        管理员id：{{userInfo.adminId}}-&#45;&#45;&#45;&#45;-->
                    </div>
                    <el-menu default-active="1" class="el-menu-demo" mode="horizontal"
                             style="background: none; flex: 30%;margin-top: 40px">
                        <el-menu-item class="item-right-top" index="1" @click="$router.push('/index')">首页</el-menu-item>
                        <!--                        <el-menu-item class="item-right-top" index="2" @click="$router.push('/message')">论坛留言</el-menu-item>-->
                        <el-menu-item class="item-right-top" index="2" @click="wkfmk()">论坛留言</el-menu-item>
                        <!--                        <el-menu-item class="item-right-top" index="3" @click="$router.push('/ContactAuthor')">联系作者</el-menu-item>-->
                        <el-menu-item class="item-right-top" index="3" @click="cardShow = true">联系作者</el-menu-item>
                        <el-menu-item class="item-right-top" index="4" @click="$router.push('/PersonalInformation')">
                            个人中心
                        </el-menu-item>
                        <el-menu-item class="item-right-top" index="5" @click="$router.push('/welcome')">退出登录
                        </el-menu-item>
                    </el-menu>
                </el-header>
                <el-main>
                    <router-view></router-view>
                    <el-card shadow="hover" class="box-card" v-show="cardShow"
                             style="position: absolute; top: 20%; right: 33%; z-index: 1005">
                        <div slot="header" class="clearfix">
                            <span>联系方式</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="cardShow=false">取消
                            </el-button>
                        </div>
                        <div style="text-align: center">
<!--                            <img src="../image/wx.jpg" alt="">-->
                            反馈邮箱：1263375216@qq.com
                        </div>
                    </el-card>
                </el-main>
                <el-footer style="height: 60px; color: #bfbebe; background-color: rgb(70,127,152)">
<!--                    <span >反馈邮箱：1263375216@qq.com</span>-->
<!--                    备案/许可证编号：<a href="http://beian.miit.gov.cn/" style="text-decoration: none">桂ICP备2021004479号</a>-->
<!--                    <el-row style="background-color: rgb(118, 118, 233);">-->
<!--                        <el-col :span="10">&nbsp;</el-col>-->
<!--                        <el-col :span="5">反馈邮箱：1263375216@qq.com</el-col>-->
<!--                    </el-row>-->
                    <el-row>
                        <el-col :span="5" /><span >反馈邮箱：1263375216@qq.com</span>
                        <el-col :span="10">
                            备案/许可证编号：<a href="http://beian.miit.gov.cn/" style="text-decoration: none">桂ICP备2021004479号</a>
                        </el-col>
                    </el-row>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // import axios from 'axios';

    export default {
        name: "layout",
        data() {
            return {
                cardShow: false,
                activeIndex: '1',
                token: localStorage.getItem('TOKEN'),
                userInfo: {},
                personInfo: {},
            };
        },
        created() {
            this.$axios.get('/api/user/token', {headers: {TOKEN: this.token}}).then(res => {
                this.userInfo = res.data.data;
            });
        },
        methods: {

            // mskWX(){
            //   this.cardShow = true;
            // },

            wkfmk() {
                alert('该功能未向管理员开放，请等待更新！')
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },

        }
    }
</script>

<style lang="scss">
    #layout {
        max-width: 1920px;
        min-width: 1600px;

        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }

        .box-card {
            width: 480px;
        }

        .el-image__inner {
            vertical-align: bottom;
        }

        .logoImg {
            display: block;
            text-align: center;
            width: 120px;
            height: 120px;
            background: url("~@/../src/image/LOGO-2.png") center center no-repeat;
            background-size: 100px auto;
            padding: 10px 19px 0;
        }

        .el-item-left {
            width: 160px;
            text-align: left;
        }

        .el-header, .el-footer {
            background-color: #545c64;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-right: 10px;
        }

        .el-aside {
            background-color: #545c64;
            color: #333;
            text-align: center;
            line-height: 100px;
            /*padding: 0 20px;*/
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            /*text-align: center;*/
            /*line-height: 160px;*/
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .el-menu-item {
            color: #f8de5c;
            font-size: 16px;
        }

        .el-menu {
            border: none;
        }

        .el-menu--horizontal > .el-menu-item {
            color: white;
        }

        .el-menu.el-menu--horizontal {
            border: none;
        }
    }
</style>